                                                <!-- 侧边导航栏组件 -->

<!-- 传入属性 -->
<!--
sideList: 渲染数组
            例：  [
                    {
                        title: '用户统计',
                        icon: 'https://oss4.komect.com/equity-gs/cms/home/index_ic_yhtj.png',
                        changeIcon: 'https://oss4.komect.com/equity-gs/cms/home/index_ic_yhtj_xz.png',
                        url: ''
                        children: [
                            { title: '新增用户', url: '' },
                            { title: '活跃用户', url: '' }
                        ]
                    }
                ]
            注：1.若无需  children属性，则无需添加  
                2.children 与  url  不能成为兄弟属性，二者使用时，只能存在其中一个  但children可使用子级url
sideWidth:自定义宽度  默认230px
sideBackColor:自定义背景颜色  默认#19203c
itemHeight:自定义成员高度  59px(含下边框则是60px)

字体样式
 ======================================================================
sideColor:自定义字体颜色  默认#fff
sideSize:自定义字体大小  默认16px
sideWeight:自定义字体宽度  默认400

成员下边框样式
======================================================================
sideBottomColor:下边框颜色   默认#2b314c
sideBottomStyle:下边框类型   默认solid
sideBottomWidth:下边框宽度   默认1px

binIndex:  默认选择位置  默认 0
ifopen:下拉框是否默认开启  默认开启true
-->
<!-- 传入函数 -->
<!-- 
Navigation：使用父组件函数  传递位置信息，和跳转地址
 -->

<template>
  <div
    class="sideNavigation"
    :style="[
      {
        backgroundColor: sideBackColor,
      },
      { color: sideColor },
      { fontSize: sideSize },
      { fontWeight: sideWeight },
      { width: sideWidth },
    ]"
    @mouseleave="mouseout"
  >
    <!-- 选择的成员 -->
    <!-- -------------------------------------------------------------------------------------------------- -->
    <div
      class="sideNavigation-nolook"
      v-for="(value, index) in sideList"
      :key="index"
      :id="index + 'nolook'"
      :style="{
        height:
          ifopen && value.children && changItemIndex == index
            ? nowHeight > itemHeight
              ? itemHeight + 'px'
              : itemHeight * (value.children.length + 1) + 'px'
            : itemHeight + 'px',
      }"
    >
      <div
        class="sideNavigation-item"
        @mouseenter="mouseenter(index)"
        @click="sideNavigation(index, value.url, index + 'nolook')"
        :style="[
          { height: itemHeight + 'px' },
          { borderBottomColor: sideBottomColor },
          { borderBottomStyle: sideBottomStyle },
          { borderBottomWidth: sideBottomWidth + 'px' },
        ]"
        :class="nolookNum == index ? 'changeClik' : ''"
      >
        <!-- 图标 -->
        <div
          class="sideNavigation-item-icon"
          v-show="nolookNum != index"
          :style="{ backgroundImage: 'url(' + value.icon + ')' }"
        ></div>
        <div
          class="sideNavigation-item-icon"
          v-show="nolookNum == index"
          :style="{ backgroundImage: 'url(' + value.changeIcon + ')' }"
        ></div>
        <!-- 标题 -->
        <div class="sideNavigation-item-title">{{ value.title }}</div>
        <!-- 箭头 -->
        <div
          class="sideNavigation-item-arrows"
          v-show="nolookNum != index && value.children"
          :style="{
            backgroundImage:
              'url(https://oss4.komect.com/equity-gs/cms/home/index_ic_xl.png)',
          }"
        ></div>
        <div
          class="sideNavigation-item-arrows"
          v-show="nolookNum == index && value.children"
          :class="nowHeight >= itemHeight + sideBottomWidth ? '' : 'blueNO'"
          :style="{
            backgroundImage:
              'url(https://oss4.komect.com/equity-gs/cms/home/index_ic_xl_xz.png)',
          }"
        ></div>
      </div>

      <!-- 隐藏区域 -->
      <div class="sideNavigation-item-nolook">
        <!-- 隐藏区域成员 -->
        <div
          class="sideNavigation-item-nolook-item"
          :class="{ changeClik: nolookNum == index + '-' + i ? true : false }"
          :style="[
            { height: itemHeight + 'px' },
            { borderBottomColor: sideBottomColor },
            { borderBottomStyle: sideBottomStyle },
            { borderBottomWidth: sideBottomWidth + 'px' },
          ]"
          @click.stop="sideNavigation(index + '-' + i, v.url)"
          v-for="(v, i) in value.children"
          :key="index + '-' + i"
          @mouseenter="mouseenter(index + '-' + i)"
        >
          <span>{{ v.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //渲染类
    // ----------------------------------------------------------------------------------------------------------
    // 综合样式
    // ======================================================================
    // 渲染数组
    sideList: {
      type: [Array],
      default() {
        return [];
      },
    },
    // 默认选择位置
    binIndex: {
      type: [Number, String],
      default: 0,
    },
    // 自定义宽度  默认230px
    sideWidth: {
      type: [String, Number],
      default: 230 + "px",
    },
    // 自定义背景颜色  默认#19203c
    sideBackColor: {
      type: [String],
      default: "#19203c",
    },
    // 自定义成员高度  59px(含下边框则是60px)
    itemHeight: {
      type: [String, Number],
      default: 59,
    },

    // 字体样式
    // ======================================================================
    // 自定义字体颜色  默认#fff
    sideColor: {
      type: [String],
      default: "#f2f7fc",
    },
    // 自定义字体大小  默认16px
    sideSize: {
      type: [String, Number],
      default: 16 + "px",
    },
    // 自定义字体宽度  默认400
    sideWeight: {
      type: [String, Number],
      default: 400,
    },

    // 成员下边框样式
    // ======================================================================
    // 下边框颜色   默认#2b314c
    sideBottomColor: {
      type: [String],
      default: "#2b314c",
    },
    // 下边框类型   默认solid
    sideBottomStyle: {
      type: [String],
      default: "solid",
    },
    // 下边框宽度     默认1px
    sideBottomWidth: {
      type: [String, Number],
      default: 1,
    },

    // 判断类
    // ---------------------------------------------------------------------------------------------
    // 下拉框是否默认开启  默认开启
    ifopen: {
      type: [Boolean],
      default: true,
    },
  },
  created() {
    // 默认是否开启隐藏弹窗
    this.peopleChangeIndex = this.binIndex;
  },
  watch: {
    // 同步默认数据
    // ------------------------------------------------------------------------
    // 默认位置信息
    binIndex() {
      this.nolookNum = this.binIndex;
    },
    // 同步默认打开第一个选中的有子级的位置
    sideList() {
      let oneIndex = [];

      // 将拥有子级的元素信息放给空数组 oneIndex
      this.sideList.forEach((value, index) => {
        if (value.children) {
          oneIndex.push(index);
        }
      });

      // 同步第一个拥有children的子级位置
      this.changItemIndex = oneIndex[0];
    },
  },
  data() {
    return {
      // 获取点击坐标的数据
      nolookNum: 0,
      // 获取拥有隐藏成员的点击位置
      changItemIndex: "",
      // 获取是否展示隐藏成员的数据
      nowHeight: "60",
      // 用于恢复用户选中成员
      peopleChangeIndex: "",
      // 用于恢复带有（例‘4-1’）形式的位置信息
      childrenItem: "",
    };
  },
  methods: {
    // 成员鼠标进入事件
    mouseenter(index) {
      // 使位置信息等于选择的位置
      this.nolookNum = index;
    },
    // 鼠标移出事件
    mouseout() {
      // 使位置信息等于clike选择的位置
      this.nolookNum = this.peopleChangeIndex;
    },

    // 点击可展示成员函数
    sideNavigation(index, url, id) {
      // 若是正常位置的数字，则判断是否有children属性数组，没有可以改变位置信息
      if (Number(index) == index && this.sideList[index].children) {
        // 获取此元素当时的高度  原本是xx+px  故需要截取
        this.nowHeight = document
          .getElementById(id)
          .style.height.substring(
            0,
            document.getElementById(id).style.height.length - 2
          );

        // 判断之前选择的成员是否是字符串（例 ‘4-1’）形式 并且原本的高度是>60的
        if (this.peopleChangeIndex.length > 1 && this.nowHeight > 60) {
          // 将用于恢复带有（例‘4-1’）形式的位置信息childrenItem  赋值为用于恢复用户选中成员peopleChangeIndex
          this.childrenItem = this.peopleChangeIndex;
          // 此时改变  用于恢复用户选中成员peopleChangeIndex  变成其首位（4-1中的4）的信息
          this.peopleChangeIndex = this.peopleChangeIndex.split("-")[0];
        } else {
          // 如果此拥有子级的元素未拥有未开启子级  且  用于恢复用户选中成员peopleChangeIndex不是字符串形式  则同步曾经保存的位置信息childrenItem
          this.peopleChangeIndex = this.childrenItem;
        }

        // 存在子级隐藏元素，则同步隐藏元素位置信息
        this.changItemIndex = index;

        // 跳出函数
        return;
      }

      // 使其他位置信息（无子级数组+子级数组成员）等于选择的位置
      this.childrenItem = index;
      this.peopleChangeIndex = index;

      // 使用父组件函数  传递位置信息，和跳转地址
      this.$emit("Navigation", { index: index, url: url });
    },
  },
};
</script>

<style>
/* 侧边导航栏组件 */
.sideNavigation {
  font-family: PingFangSC, PingFangSC-Regular;
}

/* 成员样式 */
/* ------------------------------------------------------------- */
/* 公共样式 */
/* ================================================= */
.sideNavigation-item {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
/* 图标 */
.sideNavigation-item-icon {
  width: 19px;
  height: 19px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 17px 0 9px;
}

/* 拥有下拉框成员 */
/* ================================================= */
.sideNavigation-nolook {
  width: 100%;
  transition: all 0.6s;
  overflow: hidden;
}
/* 箭头 */
.sideNavigation-item-arrows {
  width: 8px;
  height: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 18px;
  transition: all 0.6s;
}
/* 隐藏区域 */
.sideNavigation-item-nolook {
  width: 100%;
  transition: all 0.6s;
}
/* 隐藏区域成员 */
.sideNavigation-item-nolook-item {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  transition: all 0.6s;
}
.sideNavigation-item-nolook-item span {
  margin-left: 42px;
}

/* 选中时样式 */
/* ------------------------------------------------------------- */
.changeClik {
  font-weight: 500;
  color: #00a0ff;
  background-color: #1c2d53;
}

/* 有隐藏框成员选中时样式 */
/* ================================================= */
/* 蓝色箭头样式(未点击) */
.blueNO {
  transform: rotate(180deg);
  transition: all 0.6s;
}
</style>
